<template>
  <div class="box7">
    <div class="title">
      <p>年度游客量对比</p>
      <img src="../images/dataScreen-title.png" alt="" />
    </div>
    <div class="charts" ref="charts"></div>
  </div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts'
import { ref, onMounted } from 'vue'
//获取DOM节点
let charts = ref()
//组件挂载完毕
onMounted(() => {
  //一个容器可以同时展示多种类型的图形图标
  let mychart = echarts.init(charts.value)
  //设置配置项
  mychart.setOption({
    color: ['#23CF9C', '#578FFB', '#FF61E6'],
    legend: {
      top: '10%',
      left: '35%',
      textStyle: {
        color: 'white',
        fontSize: 16,
      },
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
      },
    },
    grid: {
      top: '30%',
      left: '4%',
      right: '4%',
      bottom: '5%',
      containLabel: true,
    },
    xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        axisLabel: {
          formatter: '{value}月',
          textStyle: {
            color: 'white',
            fontSize: 12,
          },
        },
        axisLine: {
          lineStyle: {
            color: '#D9D9D9',
          },
        },
        data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
      },
    ],
    yAxis: [
      {
        type: 'value',
        name: '单位：万',
        nameLocation: 'end',
        axisLabel: {
          textStyle: {
            color: 'white',
            fontSize: 12,
          },
        },
        nameTextStyle: {
          color: 'white',
          fontSize: 16,
          lineHeight: 20,
        },
        splitLine: {
          lineStyle: {
            type: 'dashed',
            color: '#E9E9E9',
          },
        },
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
      },
    ],
    series: [
      {
        name: '2021年',
        type: 'line',
        smooth: true,
        // showSymbol: false,/
        symbolSize: 8,
        zlevel: 3,
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: '#23CF9C30',
                },
                {
                  offset: 1,
                  color: '#23CF9C10',
                },
              ],
              false,
            ),
            shadowColor: '#23CF9C10',
            shadowBlur: 10,
          },
        },
        data: [
          1002, 1238, 3503, 1743, 1280, 1530, 1810, 2330, 3122, 555, 3243, 2342,
        ],
      },
      {
        name: '2022年',
        type: 'line',
        smooth: true,
        // showSymbol: false,
        symbolSize: 8,
        zlevel: 3,
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: '#578FFB30',
                },
                {
                  offset: 1,
                  color: '#578FFB10',
                },
              ],
              false,
            ),
            shadowColor: '#578FFB10',
            shadowBlur: 10,
          },
        },
        data: [
          2333, 2233, 2200, 1380, 1994, 2633, 2710, 1280, 1280, 1530, 1810,
          2330,
        ],
      },
      {
        name: '2023年',
        type: 'line',
        smooth: true,
        // showSymbol: false,
        symbolSize: 8,
        zlevel: 3,
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: '#6E40F230',
                },
                {
                  offset: 1,
                  color: '#6E40F210',
                },
              ],
              false,
            ),
            shadowColor: '#6E40F210',
            shadowBlur: 10,
          },
        },
        data: [
          4050, 3700, 2850, 1480, 2879, 183, 3820, 1880, 2200, 1380, 1994, 2633,
        ],
      },
    ],
  })
})
</script>

<style scoped lang="scss">
.box7 {
  width: 100%;
  height: 100%;
  background: url(../images/dataScreen-main-cb.png) no-repeat;
  background-size: 100% 100%;
  margin: 20px 0px;

  .title {
    p {
      color: white;
      font-size: 18px;
    }
  }

  .charts {
    height: calc(100% - 30px);
  }
}
</style>
